You are here:

Using Skins in the Self Service Portal

You can create multiple Skins for your vFire Self Service portal to display the logo, colors, fonts, and other distinctive brand features of your organization or various departments without having to manipulate HTML or CSS.

You can:

Create multiple skins, so that you can display different systems differently
Create and configure vFire Self Service submit and review screens
Rebrand the vFire Self Service portal template page (banner, menu bar, navigation bar, headings, text format)
Change the font, color, and style of screen widgets, buttons, and the menu panel

Menu items in the My Options menu pane can be hidden, added to, and reordered in Self Service Portal My Options in System Admin.

Creating a Skin

Two skins are provided with vFire Core: Default and Classic. Additional skins can be created. All skins can have their fonts, colors, banners, and widget styles redesigned.

Before you start

To work with Self Service portal skins using the Designer, you must have Designer selected in your General Access Security Role.

To maintain an audit trail of changes made to screens, forms and message templates, Designer must be selected in the Auditing window.

Make the Skins tab uppermost .
Select the skin you want to clone from using the Skin drop down list in the top right corner of the window .
Press at the bottom of the main pane.
Enter a name for your new skin and press .
The new skin appears in the drop down list in the top right hand corner of the window and is ready to be redesigned.
To rename the skin press at the bottom of the main pane, enter the new name and press .
To delete the skin press at the bottom of the main pane, enter the new name and press .

If your system has multiple portal systems, you can apply a different skin to each one in Self Service Portal Systems in System Admin.

Redesigning a Skin

Before you start

You must have Designer selected in your General Access Security Role.

To maintain an audit trail of changes made to screens, forms and message templates, Designer must be selected in the Auditing window.

Make the Skins tab uppermost .
Ensure that you are working on the correct skin by selecting from the drop down list in the top right corner of the window .
In the main part of the window, the Self Service Portal Template tab is uppermost , and displays a preview of the skin and all of its elements.
Select the element you want to modify, such as Global Font, Headings, Page Header, My Options, Widgets, and so on.
Beneath the list of elements, you can see a list of styles you may edit for the selected element. For example:
- for Global Font, you can edit the Font Family, Font Color and Font Size
- for Page Header, you can edit the banner image, banner background, image alignment, and so on
- for All Widgets, you can edit Header Font family, color, size, and text spacing
- for Table Widgets, you can edit alternate row striping, and border, header, font, background, and row color
Use caution when selecting the largest available font sizes. On small browser windows, the largest font sizes may result in text truncating, wrapping, or displaying poorly.
Select the new styles, using the drop down lists. To upload a new banner image, see the section below.
Select to view the changes.
Select at the bottom of the main pane to apply the changes, or to revert to the original skin design. Key in the change reasons if prompted to do so.

Widget headers use the Lato font by default. However, Internet Explorer's default security settings prevent fonts from being downloaded, so the Lato font will appear as Arial unless the default setting in Internet Explorer is changed. This limitation does not extend to other browsers.

Uploading an Image for the Banner

By default, the Self Service portal banner displays the vFire logo but you can replace this with your own logo.

Before you start

You must have Designer selected in your General Access Security Role.

The image must be in a supported format. Designer supports JPEG, GIF, PNG, BMP and TIFF file formats.

To maintain an audit trail of changes made to screens, forms and message templates, Designer must be selected in the Auditing window.

Make the Skins tab uppermost .
Ensure that you are working on the correct skin by selecting from the drop down list in the top right hand corner of the window .
In the main part of the window, the Self Service Portal Template tab is uppermost , and displays a preview of the skin and all of its elements.
Select Page Header in the list box and complete the details, selecting to preview the effect after each change:

Banner Background Color	Select the color for the background from the drop down list
Banner Minimum Height	Select the minimum height for the banner. If the image height and padding is larger than the selected value, the banner will automatically expand to accommodate.
Banner Image Padding	Select the number of pixels to add as padding for the image. The image is centered within the padding.
Show Main Image	Choose whether to show or hide the banner
Main Image Alignment	Choose whether you want the logo to appear on the left or right hand side of the banner
Banner Main Image	Select and navigate to the image you want to use. Select Open to see the name of the file in the field.

Select to view the changes.
Select at the bottom of the main pane to apply the changes, or to revert to the original portal template. Key in the change reasons if prompted to do so.

Displaying the Self Service Portal Template History

Before you start

To view the history of changes to the Self Service portal using the Designer, you must have Designer selected in your General Access Security Role.

To maintain an audit trail of changes made to screens, forms and message templates, Designer must be selected in the Auditing window.

You can display the history of changes to the Self Service portal template, which will record the dates of changes, the nature of the change, and the analyst who made the changes.

Make the Skins tab uppermost .
In the main panel, the Self Service Portal Template tab is uppermost. Select the Self Service Portal Template History.
A list of changes is displayed, along with the name of the Analyst and the date of the changes. To see more details on any of the changes, click on the arrow to the left of their name .
If you wish to export the history to an Excel file for reporting or auditing purposes, select at the bottom of the window and specify the file location in the Save As dialog box.

Find a Screen	Can be used to search for and work with specific screens, forms or message templates, as well as create new in-house screens
View screens	Displays details of currently selected screens and is used to modify screens
Skins	Enables you to create and modify skins for your vFire Self Service Portal(s)

Find a Screen	Can be used to search for and work with specific screens, forms or message templates, as well as create new in-house screens
View screens	Displays details of currently selected screens and is used to modify screens
Skins	Enables you to create and modify skins for your vFire Self Service Portal(s)

Find a Screen	Can be used to search for and work with specific screens, forms or message templates, as well as create new in-house screens
View screens	Displays details of currently selected screens and is used to modify screens
Skins	Enables you to create and modify skins for your vFire Self Service Portal(s)

Find a Screen	Can be used to search for and work with specific screens, forms or message templates, as well as create new in-house screens
View screens	Displays details of currently selected screens and is used to modify screens
Skins	Enables you to create and modify skins for your vFire Self Service Portal(s)